<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div style="max-width: 800px" class="content">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          label-width="180px"
          class="demo-ruleForm"
          :size="formSize"
        >
          <el-form-item label="姓名" prop="name">
            <el-input disabled v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="学号" prop="studentNumber">
            <el-input disabled v-model="ruleForm.studentNumber" />
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input disabled v-model="ruleForm.phone" />
          </el-form-item>
          <el-form-item label="中大邮箱" prop="email">
            <el-input disabled v-model="ruleForm.email" />
          </el-form-item>
          <el-form-item label="当前身份" prop="curIdentity">
            <el-input disabled v-model="ruleForm.curIdentity" />
          </el-form-item>
          <el-form-item label="所属支部管理员" prop="administrator">
            <el-input disabled v-model="ruleForm.administrator" />
          </el-form-item>
          <el-form-item label="所属支部" prop="branch">
            <el-input disabled v-model="ruleForm.branch" />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted, onUnmounted } from 'vue'
  import { type FormInstance } from 'element-plus'
  import { useUserStore } from '../../store/modules/user'
  import watermark from '@/utils/watermark.js'
  import { getSettingList } from '@/lafSdkCollection/getSetting'
  const formSize = ref('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
    name: '',
    studentNumber: '',
    phone: '',
    email: '',
    curIdentity: '',
    administrator: '',
    branch: '',
  })
  const userStore = useUserStore()
  const getInfo = async () => {
    ruleForm.name = userStore.name
    ruleForm.email = userStore.email
    ruleForm.studentNumber = userStore.num
    ruleForm.phone = userStore.phone
    ruleForm.curIdentity = userStore.userInfo.outlook
    ruleForm.administrator = userStore.admin
    ruleForm.branch = userStore.branch_name
  }
  const getSetting = async () => {
    const { outlook } = await getSettingList()
    ruleForm.curIdentity = outlook[parseInt(userStore.userInfo.outlook)]
  }
  onMounted(async () => {
    await getInfo()
    await getSetting()
    await setWaterMark()
  })
  const setWaterMark = () => {
    //添加水印
    watermark.set(userStore.name, userStore.num)
    //移除水印,传 null 移除水印
    //watermark.close()
  }
  onUnmounted(async () => {
    watermark.close(null)
  })
</script>

<style scoped lang="scss">
  .content {
    margin-left: 10%;
    margin-top: 12%;
  }
</style>
